import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

const geometry = new THREE.Geometry(); // 声明一个几何体对象

/**
 * 开始绘制 U 形轮廓
 */
const r = 80;
const arc = new THREE.ArcCurve(0, 0, r, 0, Math.PI, true); // 基类：Curve
const line1 = new THREE.LineCurve3(new THREE.Vector3(r, 200, 0), new THREE.Vector3(r, 0, 0));
const line2 = new THREE.LineCurve3(new THREE.Vector3(-r, 0, 0), new THREE.Vector3(-r, 200, 0));
// 上面的圆弧是顺时针绘制，就要求最终组合曲线上的点的绘制顺序也是顺时针的，所以这里 lin1 line2 顶点的给入是特定的。
// 当然下面 curves.push 也会影响，记住最终保证组合曲线绘制时向是一致的。

// 创建组合曲线对象 CurvePath
const curvePath = new THREE.CurvePath(); // 基类：Curve
// 将线条插入到组合曲线中
curvePath.curves.push(line1, arc, line2);

// 统一分段取点
const points = curvePath.getPoints(200);
geometry.setFromPoints(points);

// 材质
const material = new THREE.LineBasicMaterial({
  color: 0x000000
});

// 模型对象
const line = new THREE.Line(geometry, material);
scene.add(line);

const axisH = new THREE.AxesHelper(200);
scene.add(axisH);

const k = innerWidth / innerHeight,
      s = 60,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xaaaaaa);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();